<template>
  <div>
    <el-card>
       <el-button type="primary" @click="openAddDialog">添加角色</el-button>
    </el-card>
    <!--创建角色的模态框 -->
    <el-dialog
      title="创建角色" 
      :visible.sync="visiableAddDialog">
       <el-form label-width="80px">
          <el-form-item label="角色名称">
            <el-input placeholder="身份名称" v-model="role.role_name"></el-input>
          </el-form-item>
          <el-form-item label="角色状态">
             <el-switch v-model="role.status"></el-switch>
          </el-form-item>
          <el-form-item label="菜单权限">
             <el-tree
                  ref="menuRef" 
                  :data="list"
                  :show-checkbox="true"
                  :default-expand-all="true"
                  :props="{label:'name'}"
                  node-key="id">
            </el-tree>
          </el-form-item>
       </el-form>
         <span slot="footer" class="dialog-footer">
          <el-button @click="visiableAddDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddRole">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      visiableAddDialog:false,
      list:[],
      role:{
        role_name:'',
        status:1,
        rules:'',
        level:1
      }
    }
  },
  methods:{
    async getMenuList(){
      const result=await this.$api.menuModule.getMenuListApi()
      this.list=result.data
    },
    openAddDialog(){
      this.visiableAddDialog=true
      this.getMenuList()
    },
    checkedMenus(){
      //获取选中的复选框key的集合
      const ary1=this.$refs.menuRef.getCheckedKeys()
      //获取半选复选框的key的集合
      const ary2=this.$refs.menuRef.getHalfCheckedKeys()
      //const ary3=[...ary1,...ary2]
      ary1.push.apply(ary1,ary2)
      return ary1
    },
    async confirmAddRole(){
      const ary=this.checkedMenus()
      if(ary&&ary.length>0){
        this.role.rules=ary.join(",")
      }
      const result=await this.$api.roleModule.addRoleApi(this.role)
      console.log('result',result);
    
    },
  }
}
</script>

<style scoped>

</style>